<template>
  <div class="data_container">
    <div class="choose_point">
      <span class="demonstration">选择监测点</span>
      <el-cascader
        v-model="point_value"
        :options="point_options"
        @change="handleChange"
      ></el-cascader>
    </div>
    <div class="choose_time">
      <el-button type="success" plain @click="date_range = 'day'">日</el-button>
      <el-button type="success" plain @click="date_range = 'week'"
        >周</el-button
      >
      <el-button type="success" plain @click="date_range = 'month'"
        >月</el-button
      >
      <el-button type="success" plain @click="date_range = 'year'"
        >年</el-button
      >
    </div>
    <div class="show_cross">
      <div ref="chart" class="chart_container"></div>
    </div>
    <div class="data_card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-card class="box-card">
            <div>
              <el-statistic :value="statisticValue.DO" title="溶解氧"
                ><template slot="suffix">
                  <span>mg/L</span>
                </template></el-statistic
              >
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div>
              <el-statistic :value="statisticValue.BOD" title="生化需氧量"
                ><template slot="suffix">
                  <span>mg/L</span>
                </template></el-statistic
              >
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div>
              <el-statistic :value="statisticValue.COD" title="化学需氧量"
                ><template slot="suffix">
                  <span>mg/L</span>
                </template></el-statistic
              >
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card class="box-card">
            <div>
              <el-statistic :value="statisticValue.DIN" title="无机氮"
                ><template slot="suffix">
                  <span>mg/L</span>
                </template></el-statistic
              >
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      point_value: [],
      point_options: [],
      long_date_data: {},
      date_range: "day",
      statisticValue: {},
    };
  },
  created() {
    this.getPointCascade();
  },
  mounted() {},
  watch: {
    point_value() {
      this.$nextTick(() => {
        this.getPointDateData("");
      });
    },
    long_date_data() {
      this.$nextTick(() => {
        this.drawChart();
      });
    },
    date_range() {
      this.$nextTick(() => {
        this.drawChart();
      });
    },
  },
  computed: {},
  methods: {
    // 获取级联选择器point_options
    getPointCascade() {
      this.$axios({
        url: "getPointCascade",
        params: {
          work_province: this.$store.state.userInfo.work_province,
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.point_options = res.data;
          // 默认选择第一个作为选择的监测点
          this.point_value = [res.data[0].value, res.data[0].children[0].value];
        })
        .catch((err) => err);
    },
    // 改变级联选项回调函数
    handleChange(value) {
      // 选择的监测点
      // console.log(value[1]);
      this.getPointDateData(value[1]);
    },
    // 获取监测点数据信息
    getPointDateData(point_value) {
      let point_code = point_value ? point_value : this.point_value[1];
      this.$axios({
        url: "getLongData",
        params: {
          monitor_point_code: point_code,
        },
      })
        .then((res) => {
          // console.log(res.data);
          this.long_date_data = res.data;
        })
        .catch((err) => err);
    },
    // 绘制新的echarts折线图
    // 画图
    drawChart() {
      const myChart = this.$echarts.init(this.$refs.chart);
      var myOption = {};
      myOption = this.getMyOption(this.long_date_data, this.date_range);
      myChart.setOption(myOption);
    },
    // 生成options
    getMyOption(data, range) {
      let rData = data[range];
      let showX = ["溶解氧", "PH", "生化需氧量", "化学需氧量", "无机氮"];
      let legendData = [];
      this.statisticValue = rData[rData.length - 1];
      for (let i in rData) {
        legendData.push(rData[i].time);
      }
      let series = [];
      for (let i in showX) {
        let dData = [];
        let x_key = this.common.getObjectKey(this.constant.PhCh, showX[i]);
        for (let j in rData) {
          dData.push(rData[j][x_key]);
        }
        series.push({
          name: showX[i],
          type: "line",
          smooth: true,
          label: {
            show: true,
            position: "right",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: dData,
        });
      }
      let option = {
        title: {
          text: "海洋监测各项指标",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          data: showX,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: legendData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: series,
      };
      return option;
    },
  },
};
</script>
<style lang="less" scoped>
.data_container {
  padding: 20px;
  .choose_point {
    margin-bottom: 20px;
    margin-left: 40px;
    .demonstration {
      margin-right: 10px;
    }
  }
  .choose_time {
    position: absolute;
    top: 20px;
    right: 40px;
    .el-button {
      width: 80px;
      margin-right: 15px;
    }
  }
  .show_cross {
    margin-top: 20px;
    .chart_container {
      width: 95%;
      margin: 0 auto;
      height: 500px;
    }
  }
  .data_card {
    margin-top: 20px;
    .el-statistic .head {
      font-size: 20px !important;
    }
  }
}
</style>
